<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta http-equiv="X-UA-Compatible" content="IE=8">
		<title>招生计划--人气排行榜 </title>
		<!--<link href="../favicon.ico" rel="icon" type="image/x-icon" />-->
		<link rel="stylesheet" href="../../bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="../../layui/css/layui.css">
		<link rel="stylesheet" href="../../css/swiper.min.css">
		<link rel="stylesheet" href="../../css/common.css">
		<link rel="stylesheet" href="../../css/default.css">
		<link rel="stylesheet" href="../../css/style.css">

		<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
		<!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js?version=1.01"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js?version=1.01"></script>
    <![endif]-->

	</head>

	<body>
		<div class="top_header_wrap"></div>
		<!--#include file="../common/header.html" -->
		<!--广告-->
		<div class="banner">
			<div class="swiper-container swiper-container1">
				<div class="swiper-wrapper">
					<div class="swiper-slide"><img src="../../img/banner.jpg"></div>
					<div class="swiper-slide"><img src="../../img/banner.jpg"></div>
					<div class="swiper-slide"><img src="../../img/banner.jpg"></div>
				</div>
				<!-- Add Pagination -->
				<div class="swiper-pagination"></div>
			</div>
		</div>
		<!--内容-->
		<div class="main_container">
			<div class="layui-container">
				<div class="brumb_box">
					<a href="entrance_programs.html">招生计划</a>&gt;
					<a href="ranking_school.html">高校报考热度排行榜</a>
				</div>
				<div class="ranking_school layui-row">
					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn active" schoolId="0">财经院校</button>
					</div>
					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn" schoolId="1">政法院校</button>
					</div>
					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn" schoolId="2">理工院校</button>
					</div>

					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn" schoolId="3">师范院校</button>
					</div>
					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn" schoolId="4">医药类</button>
					</div>
					<div class="layui-col-lg2 layui-col-md2 layui-col-sm4 layui-col-xs4">
						<button class="ranked_school_btn" schoolId="5">其他类(独立院校)</button>
					</div>
				</div>
				<div class="module_box module_box_new">
					<div class="layui-row search_row">
						<h3>搜索您想要了解的学校</h3>
						<div class="search_box">
							<input type="search" class="search_input" placeholder="请输入学校名称" /><button class="search_image"><img src="../../img/search.png"></button>
						</div>
					</div>
					<div class="table_row">
						<div class="table-responsive">
							<table class="table table_mar">
								<thead>
									<tr>
										<th>人气排名</th>
										<th>学校名称</th>
										<th>地区</th>
										<th>类别</th>
										<th>标签</th>
									</tr>
								</thead>
								<tbody id="school_rank">
									<tr>
										<td scope="row">1</td>
										<td class="blue">西安交通大学</td>
										<td>四川</td>
										<td>理工类</td>
										<td class="blue">211</td>
									</tr>
									<tr>
										<td scope="row">1</td>
										<td class="blue">西安交通大学</td>
										<td>四川</td>
										<td>理工类</td>
										<td class="blue">211</td>
									</tr>
									<tr>
										<th scope="row">1</th>
										<td class="blue">西安交通大学</td>
										<td>四川</td>
										<td>理工类</td>
										<td class="blue">211</td>
									</tr>
								</tbody>
							</table>
							<div id="page" class="pagnition">
								<ul class="clearfix">
									<li class="before_btn"></li>
									<li>
										<a href="javascript:void(0);"><i class="before_dot">.....</i></a>
									</li>
									<li>
										<a id='currPage0' href="javascript:void(0);" class="speifyPage active">1</a>
									</li>
									<li>
										<a id='currPage' href="javascript:void(0);" class="speifyPage">2</a>
									</li>
									<li>
										<a id='currPage1' href="javascript:void(0);" class="speifyPage">3</a>
									</li>
									<li>
										<a href="javascript:void(0);"><i class="after_dot">.....</i></a>
									</li>
									<li class="after_btn">

									</li>
								</ul>
							</div>
						</div>
					</div>
				</div>

			</div>
		</div>
		<!--尾部-->
		<div class="footer_container">

		</div>
		</div>
	</body>
	<script type="text/javascript" src="../../js/jquery-1.11.0.min.js"></script>
	<script type="text/javascript" src="../../js/define.js"></script>
	<script type="text/javascript" src="../../layui/layui.js"></script>
	<script type="text/javascript" src="../../js/swiper.min.js"></script>
	<script type="text/javascript" src="../../js/swiper.js"></script>
	<script type="text/javascript" src="../../bootstrap/js/bootstrap.min.js"></script>
	<script>
		var currPage = 1;
		var totalPage = 1;

		function getData(thisPage) {
			var schoolName = $('.search_input').val();
			var classify = "0";
			for(var i = 0; i < $(".ranked_school_btn").length; i++){
				if($($(".ranked_school_btn")[i]).hasClass("active")){
					classify = $($(".ranked_school_btn")[i]).attr("schoolId");
				}
			}
			var url = "http://47.111.188.27:8080/gsgkzyl/schools/rank/" + classify + "/" + thisPage + "/7";
			if(schoolName !=''){
				url ="http://47.111.188.27:8080/gsgkzyl/schools/rank/" + schoolName + "/" + thisPage + "/7/"+classify;
			}
			$.ajax({
				type: "get",
				url: url,
				success: function(sr) {
					$('#school_rank').empty();
					var data = sr.data.list;
					if(data != null && data != "" && data != "{}" && data != "[]") {
						var schoolRankHtml = '';
						for(var i = 0; i < data.length; i++) {
							schoolRankHtml += '<tr>';
							schoolRankHtml += '<td scope="row">' + data[i].rank + '</td>';
							schoolRankHtml += '<td class="blue">' + data[i].school_name + '</td>';
							schoolRankHtml += '<td>' + data[i].region + '</td>';
							schoolRankHtml += '<td>' + data[i].category + '</td>';
							schoolRankHtml += '<td class="blue">' + data[i].classify + '</td>';
							schoolRankHtml += '</tr>';
							currPage = sr.data.currPage;
							totalPage = sr.data.totalPage;
						}
						$('#school_rank').append(schoolRankHtml);
						/*分页逻辑开始*/
						$('.before_dot').hide();
						$('.after_dot').hide();
						if(currPage > 2) {
							$('.before_dot').show();
						}
						if(currPage < totalPage - 2) {
							$('.after_dot').show();
						}

						$('.speifyPage').removeClass('active');
						var html = "";
						if(currPage > 1) {
							$("#currPage0").html(currPage - 1);
						} else {
							$("#currPage0").html(currPage);
							$("#currPage0").addClass("active")
							if(totalPage >= 2) {
								$("#currPage").html(currPage + 1);
							}
							if(totalPage >= 3) {
								$("#currPage1").html(currPage + 2);
							}
							return;
						}
						$("#currPage").html(currPage);
						$("#currPage").addClass("active");
						if(currPage < totalPage) {
							$("#currPage1").html(currPage + 1);
						} else {
							$('.speifyPage').removeClass('active');
							$("#currPage1").html(currPage);
							$("#currPage1").addClass("active")
							if(totalPage >= 2) {
								$("#currPage").html(currPage - 1);
							}
							if(totalPage >= 3) {
								$("#currPage0").html(currPage - 2);
							}
						}
						/*分页逻辑结束*/
					} else {
						$('#school_rank').html('暂无数据');
						$('.pagnition').hide();
					}
				}
			})

		}

		$(document).ready(function() {

			$(".top_header_wrap").load("../common/header.html");
			$(".footer_container").load("../common/footer.html");

			$(".before_btn").click(function() {
				if(currPage == 1)
					return;
				getData(currPage - 1);
			})
			$(".after_btn").click(function() {
				if(currPage == totalPage)
					return;
				getData(currPage + 1);
			})
			$(".speifyPage").click(function() {
				var index = $(this).html();
				getData(index);
			})

			$('.search_image').click(function() {
				getData(1);
			})
			getData(1);

			$('.ranked_school_btn').click(function() {
				$('.ranked_school_btn').removeClass("active");
				$(this).addClass("active");
				getData(1);
			})
		});
	</script>

</html>